<!-- 屈光发育档案/检查信息管理(五大干预) -->
<template>
  <div>
    <el-row>
      <el-select v-model="type" :disabled="formType == 'check'">
        <el-option value="0" label="环境干预"></el-option>
        <el-option value="1" label="药物干预"></el-option>
        <el-option value="2" label="营养干预"></el-option>
        <el-option value="3" label="物理干预"></el-option>
        <el-option value="4" label="光学干预"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" @click="addNewMeddle" :disabled="formType == 'check'">添加</el-button>
    </el-row>
    <div v-for="(item,index) in meddleList" :key="index">
      <!-- 营养干预 -->
      <table class="miui-table" v-if="item.type == '2'">
        <tr>
          <td colspan="6" style="background-color: #dfebf9;">
            营养干预
            <el-button type="danger" style="float: right;" @click="deleteHandle(index)" :disabled="formType == 'check'">删除</el-button>
          </td>
        </tr>
        <tr>
          <td>干预项</td>
          <td>材料名称</td>
          <td>数量</td>
          <td>费用</td>
          <td>合计</td>
          <td width="120px">
            <el-button type="primary" @click="addNewTypeHandle(index)" :disabled="formType == 'check'">添加</el-button>
          </td>
        </tr>
        <tr v-if="item.itemList.length == 0">
          <td colspan="6" style="color: #909399;">暂无干预项</td>
        </tr>
        <tr v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
          <td>
            <el-select v-model="meddleItem.typeId" @change="typeChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'" clearable>
              <el-option v-for="item1 in item.list" :key="item1.id" :label="item1.typeName" :value="item1.id"></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="meddleItem.materialId" :disabled="formType == 'check'" filterable default-first-option clearable>
              <el-option v-for="item1 in meddleItem.itemArr" :key="item1.id" :label="item1.materialNameCode" :value="item1.id"></el-option>
            </el-select>
            <!-- <el-input v-model="meddleItem.materialName" :disabled="formType == 'check'"></el-input> -->
          </td>
          <td>
            <el-input v-model="meddleItem.number" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.materialMoney" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.totalMoney" readonly></el-input>
          </td>
          <td>
            <el-button type="danger" icon="el-icon-delete" circle @click="delTypeHandle(index,itemIndex)" :disabled="formType == 'check'"></el-button>
          </td>
        </tr>
      </table>
      <!-- 药物干预 -->
      <table class="miui-table" v-if="item.type == '1'">
        <tr>
          <td colspan="6" style="background-color: #dfebf9;">
            药物干预
            <el-button type="danger" style="float: right;" @click="deleteHandle(index)" :disabled="formType == 'check'">删除</el-button>
          </td>
        </tr>
        <tr>
          <td>干预项</td>
          <td>材料名称</td>
          <td>数量</td>
          <td>费用</td>
          <td>合计</td>
          <td width="120px">
            <el-button type="primary" @click="addNewTypeHandle(index)" :disabled="formType == 'check'">添加</el-button>
          </td>
        </tr>
        <tr v-if="item.itemList.length == 0">
          <td colspan="6" style="color: #909399;">暂无干预项</td>
        </tr>
        <tr v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
          <td>
            <el-select v-model="meddleItem.typeId" @change="typeChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'" clearable>
              <el-option v-for="item1 in item.list" :key="item1.id" :label="item1.typeName" :value="item1.id"></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="meddleItem.materialId" :disabled="formType == 'check'" filterable default-first-option clearable>
              <el-option v-for="item1 in meddleItem.itemArr" :key="item1.id" :label="item1.materialNameCode" :value="item1.id"></el-option>
            </el-select>
            <!-- <el-input v-model="meddleItem.materialName" :disabled="formType == 'check'"></el-input> -->
          </td>
          <td>
            <el-input v-model="meddleItem.number" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.materialMoney" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.totalMoney" readonly></el-input>
          </td>
          <td>
            <el-button type="danger" icon="el-icon-delete" circle @click="delTypeHandle(index,itemIndex)" :disabled="formType == 'check'"></el-button>
          </td>
        </tr>
      </table>
      <!-- 物理干预 -->
      <table class="miui-table" v-if="item.type == '3'">
        <tr>
          <td colspan="6" style="background-color: #dfebf9;">
            物理干预
            <el-button type="danger" style="float: right;" @click="deleteHandle(index)" :disabled="formType == 'check'">删除</el-button>
          </td>
        </tr>
        <tr>
          <td>干预项</td>
          <td>材料名称</td>
          <td>数量</td>
          <td>费用</td>
          <td>合计</td>
          <td width="120px">
            <el-button type="primary" @click="addNewTypeHandle(index)" :disabled="formType == 'check'">添加</el-button>
          </td>
        </tr>
        <tr v-if="item.itemList.length == 0">
          <td colspan="6" style="color: #909399;">暂无干预项</td>
        </tr>
        <tr v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
          <td>
            <el-select v-model="meddleItem.typeId" @change="typeChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'" clearable>
              <el-option v-for="item1 in item.list" :key="item1.id" :label="item1.typeName" :value="item1.id"></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="meddleItem.materialId" :disabled="formType == 'check'" filterable default-first-option clearable>
              <el-option v-for="item1 in meddleItem.itemArr" :key="item1.id" :label="item1.materialNameCode" :value="item1.id"></el-option>
            </el-select>
            <!-- <el-input v-model="meddleItem.materialName" :disabled="formType == 'check'"></el-input> -->
          </td>
          <td>
            <el-input v-model="meddleItem.number" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.materialMoney" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.totalMoney" readonly></el-input>
          </td>
          <td>
            <el-button type="danger" icon="el-icon-delete" circle @click="delTypeHandle(index,itemIndex)" :disabled="formType == 'check'"></el-button>
          </td>
        </tr>
      </table>

      <!-- 环境干预 -->
      <table class="miui-table" v-if="item.type == '0'">
        <tr>
          <td colspan="6" style="background-color: #dfebf9;">
            环境干预
            <el-button type="danger" style="float: right;" @click="deleteHandle(index)" :disabled="formType == 'check'">删除</el-button>
          </td>
        </tr>
        <tr>
          <td>干预项</td>
          <td>材料名称</td>
          <td>数量</td>
          <td>费用</td>
          <td>合计</td>
          <td width="120px">
            <el-button type="primary" @click="addNewTypeHandle(index)" :disabled="formType == 'check'">添加</el-button>
          </td>
        </tr>
        <tr v-if="item.itemList.length == 0">
          <td colspan="6" style="color: #909399;">暂无干预项</td>
        </tr>
        <tr v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
          <td>
            <el-select v-model="meddleItem.typeId" @change="typeChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'" clearable>
              <el-option v-for="item1 in item.list" :key="item1.id" :label="item1.typeName" :value="item1.id"></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="meddleItem.materialId" :disabled="formType == 'check'" filterable default-first-option clearable>
              <el-option v-for="item1 in meddleItem.itemArr" :key="item1.id" :label="item1.materialNameCode" :value="item1.id"></el-option>
            </el-select>
            <!-- <el-input v-model="meddleItem.materialName" :disabled="formType == 'check'"></el-input> -->
          </td>
          <td>
            <el-input v-model="meddleItem.number" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.materialMoney" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
          </td>
          <td>
            <el-input v-model="meddleItem.totalMoney" readonly></el-input>
          </td>
          <td>
            <el-button type="danger" icon="el-icon-delete" circle @click="delTypeHandle(index,itemIndex)" :disabled="formType == 'check'"></el-button>
          </td>
        </tr>
      </table>

      <div v-if="item.type == '4'">
        <table class="miui-table">
          <tr>
            <td colspan="6" style="background-color: #dfebf9;">
              光学干预
              <el-button type="danger" style="float: right;" @click="deleteHandle(index)" :disabled="formType == 'check'">删除</el-button>
            </td>
          </tr>
          <tr>
            <td style="width: 120px;"></td>
            <td colspan="4">配镜处方</td>
            <td>矫正视力</td>
          </tr>
          <tr>
            <td style="width: 120px;">左眼</td>
            <td colspan="4">
              <el-input style="width: 60px;" v-model="item.mainBallOs" :disabled="formType == 'check'"></el-input> /
              <el-input style="width: 60px;" v-model="item.mainPostOs" :disabled="formType == 'check'"></el-input> /
              <el-input style="width: 60px;" v-model="item.mainAxesOs" :disabled="formType == 'check'"></el-input>
            </td>
            <td>
              <el-input style="width: 180px;" v-model="item.mainCvaOs" :disabled="formType == 'check'"></el-input>
            </td>
          </tr>
          <tr>
            <td style="width: 120px;">右眼</td>
            <td colspan="4">
              <el-input style="width: 60px;" v-model="item.mainBallOd" :disabled="formType == 'check'"></el-input> /
              <el-input style="width: 60px;" v-model="item.mainPostOd" :disabled="formType == 'check'"></el-input> /
              <el-input style="width: 60px;" v-model="item.mainAxesOd" :disabled="formType == 'check'"></el-input>
            </td>
            <td>
              <el-input style="width: 180px;" v-model="item.mainCvaOd" :disabled="formType == 'check'"></el-input>
            </td>
          </tr>
          <tr>
            <td>干预项</td>
            <td>材料名称</td>
            <td>数量</td>
            <td>费用</td>
            <td>合计</td>
            <td width="120px">
              <el-button type="primary" @click="addNewTypeHandle(index)" :disabled="formType == 'check'">添加</el-button>
            </td>
          </tr>
          <tr v-if="item.itemList.length == 0">
            <td colspan="6" style="color: #909399;">暂无干预项</td>
          </tr>
          <tr v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
            <td>
              <el-select v-model="meddleItem.typeId" @change="typeChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'" clearable>
                <el-option v-for="item1 in item.list" :key="item1.id" :label="item1.typeName" :value="item1.id"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="meddleItem.materialId" :disabled="formType == 'check'" filterable default-first-option clearable>
                <el-option v-for="item1 in meddleItem.itemArr" :key="item1.id" :label="item1.materialNameCode" :value="item1.id"></el-option>
              </el-select>
              <!-- <el-input v-model="meddleItem.materialName" :disabled="formType == 'check'"></el-input> -->
            </td>
            <td>
              <el-input v-model="meddleItem.number" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
            </td>
            <td>
              <el-input v-model="meddleItem.materialMoney" @change="numberChangeHandle($event,index,itemIndex)" :disabled="formType == 'check'"></el-input>
            </td>
            <td>
              <el-input v-model="meddleItem.totalMoney" readonly></el-input>
            </td>
            <td>
              <el-button type="danger" icon="el-icon-delete" circle @click="delTypeHandle(index,itemIndex)" :disabled="formType == 'check'"></el-button>
            </td>
          </tr>
          <!-- <tr>
            <td style="width: 80px;"></td>
            <td v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">{{meddleItem.typeName}}</td>
          </tr>
          <tr>
            <td style="width: 80px;">材料名称</td>
            <td v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
              <el-select v-model="meddleItem.materialId" clearable>
                <el-option v-for="materItem in meddleItem.materialOptions" :value="materItem.value" :label="materItem.label" :key="materItem.value"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td style="width: 80px;">数量</td>
            <td v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex">
              <el-input v-model="meddleItem.number" @change="numberChangeHandle($event,index,itemIndex)"></el-input>
            </td>
          </tr>
          <tr>
            <td style="width: 80px;">材料费用</td>
            <td v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex+'1'">
              <el-input v-model="meddleItem.materialMoney" @change="numberChangeHandle($event,index,itemIndex)"></el-input>
            </td>
          </tr>
          <tr>
            <td style="width: 80px;">合计</td>
            <td v-for="(meddleItem,itemIndex) in item.itemList" :key="itemIndex+'2'">
              <el-input v-model="meddleItem.totalMoney" readonly></el-input>
            </td>
          </tr> -->
          <tr>
            <td>未干预原因</td>
            <td colspan="5" style="text-align: left;">
              <el-radio-group v-model="item.radio" :disabled="formType == 'check'">
                <el-radio v-for="reasonItem in reasonOption" :label="reasonItem.value">{{reasonItem.label}}</el-radio>
              </el-radio-group>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
	import { remote } from '@/api/admin/dict'
  import { getPvmArcInterventionInfo, getListInfoByMasterType } from "@/api/pvm/interventiontype"
  import { getListByInterventionId } from "@/api/pvm/arcmaterialtype"
  import { getListByOptometryId } from "@/api/pvm/arcinterventionlink"

  export default {
    data() {
      return {
        type: "0",
        formType: '',
        reasonOption: [],
        meddleList: [],
        dataForm: {
          links: []
        },
        list: [],
      };
    },
    components: {},
    methods: {
      init(formType,optometryId) {
        this.formType = formType
        this.meddleList = [];
        this.list = [];
        this.dataForm = {};
        let interveneListStr = localStorage.getItem("interveneListStr")
        let materialListStr = localStorage.getItem("materialListStr")
        if(!interveneListStr || !materialListStr){
          this.getListMaterial()
        }

        if(interveneListStr){
          this.list = JSON.parse(interveneListStr)
          this.materialList = JSON.parse(materialListStr)
        }
        this.dataForm.optometryId = optometryId || "";
        setTimeout(() => {
					remote('unintervene_reason').then(response => {
					  this.reasonOption = response.data.data
					})
          if (this.dataForm.optometryId) {
            getPvmArcInterventionInfo(this.dataForm.optometryId).then(response => {
              if(response.data.code == '0'){
                let info = response.data.data;
                let resultArr = info.links;
                let tableArr = []
                for (let i = 0; i < resultArr.length; i++) {
                  let resultObj = this.list.find((item) => {
                    return item.type == resultArr[i].masterType;
                  });
                  let list = resultObj.meddleList;
                  let obj = {
                    type: resultArr[i].masterType,
                    list: list,
                    itemList: []
                  }
                  resultArr[i].itemArr = []
                  let itemArr = []
                  this.materialList.forEach(item => {
                    if(item.typeId == resultArr[i].typeId){
                      itemArr = item.list
                    }
                  })

                  itemArr.forEach((item,index) => {
                    itemArr[index].materialNameCode = item.materialName + '(' + item.pinyinCode + ')'
                  })
                  resultArr[i].itemArr = itemArr
                  obj.itemList[0] = resultArr[i]

                  tableArr.push(obj)
                }
                var arr = []
                for (var i = 0; i < tableArr.length; i++) {
                  arr.push(tableArr[i].type)
                }
                let typeList = this.unique(arr)
                let dataArr = []
                tableArr.map(mapItem => {
                  if (dataArr.length == 0) {
                    dataArr.push({
                      type: mapItem.type,
                      list: mapItem.list,
                      itemList: [...mapItem.itemList]
                    })
                  } else {
                    let res = dataArr.some(item => { //判断相同日期，有就添加到当前项
                      if (item.type == mapItem.type) {
                        item.itemList.push(mapItem.itemList[0])
                        return true
                      }
                    })
                    if (!res) { //如果没找相同日期添加一个新对象
                      dataArr.push({
                        type: mapItem.type,
                        list: mapItem.list,
                        itemList: [...mapItem.itemList]
                      })
                    }
                  }
                })
                this.meddleList = [...dataArr]
              }else{
                this.$message.error(response.data.msg)
              }
                // let tableIdArr = [];
                // for (let i = 0; i < resultArr.length; i++) {
                //   let resultObj = this.list.find((item) => {
                //     return item.type == resultArr[i].masterType;
                //   });
                //   let list = resultObj.meddleList;
                //   let itemObj = itemList.find((item) => {
                //     return item.id == resultArr[i].typeId;
                //   });
                //   resultArr[i].typeName = itemObj.typeName;
                //   resultArr[i].materialOptions = itemObj.itemList;
                //   let res = tableIdArr.some((tampItem) => {
                //     return tampItem.row == resultArr[i].row;
                //   });
                //   if (!res) {
                //     tableIdArr.push({
                //       row: resultArr[i].row,
                //       type: resultArr[i].masterType,
                //       itemList: [],
                //     });
                //   }
                // }
                // for (let i = 0; i < resultArr.length; i++) {
                //   for (let j = 0; j < tableIdArr.length; j++) {
                //     if (resultArr[i].row == tableIdArr[j].row) {
                //       tableIdArr[j].mainBallOd = resultArr[i].mainBallOd;
                //       tableIdArr[j].mainPostOd = resultArr[i].mainPostOd;
                //       tableIdArr[j].mainAxesOd = resultArr[i].mainAxesOd;
                //       tableIdArr[j].mainCvaOd = resultArr[i].mainCvaOd;
                //       tableIdArr[j].mainBallOs = resultArr[i].mainBallOs;
                //       tableIdArr[j].mainPostOs = resultArr[i].mainPostOs;
                //       tableIdArr[j].mainAxesOs = resultArr[i].mainAxesOs;
                //       tableIdArr[j].mainCvaOs = resultArr[i].mainCvaOs;
                //       tableIdArr[j].radio = resultArr[i].radio;
                //       tableIdArr[j].itemList.push(resultArr[i]);
                //     }
                //   }
                // }
            })
          }
        }, 2000);
      },
      // 获取干预类型列表
      getListMaterial() {
        let listOption = [];
        let list = []
        for (let i = 0; i <= 4; i++) {
          getListInfoByMasterType(i).then(response => {
            if(response.data.code == '0'){
              let data = response.data.data;
              data.forEach(item => {
                getListByInterventionId(item.id).then(response1 => {
                  list.push({
                    typeId: item.id,
                    list: response1.data.data
                  })
                })
              })
              listOption.push({
                type: i,
                meddleList: data
              });
              this.list = [...listOption]
            }else{
              this.$message.error(response.data.msg)
            }


          })
        }
        setTimeout(() => {
          localStorage.setItem("interveneListStr", JSON.stringify(listOption));
          localStorage.setItem("materialListStr", JSON.stringify(list));
        },3000)
      },
      typeChangeHandle(value,index,itemIndex){
        this.meddleList[index].itemList[itemIndex]['materialId'] = ''
        this.meddleList[index].itemList[itemIndex]['itemArr'] = []
        getListByInterventionId(value).then(response => {
          if(response.data.code == '0'){
            let responseData = response.data.data
            responseData.forEach((item,index) => {
              responseData[index].materialNameCode = item.materialName + '(' + item.pinyinCode + ')'
            })
            this.meddleList[index].itemList[itemIndex]['itemArr'] = [...responseData]
            this.meddleList = [...this.meddleList]
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 添加干预项
      addNewMeddle() {
        let listOption = this.list;
        let obj = listOption.find((item) => {
          return item.type == this.type;
        });
        let timestamp = new Date().valueOf();
        if (this.type == "4") {
          this.meddleList.push({
            type: this.type,
            list: obj.meddleList,
            itemList: [{interventionName: '', materialId: '', number: '', materialMoney: '', totalMoney: ''}],
            mainBallOd: "",
            mainPostOd: "",
            mainAxesOd: "",
            mainCvaOd: "",
            mainBallOs: "",
            mainPostOs: "",
            mainAxesOs: "",
            mainCvaOs: "",
            radio: 3,
          });
        } else {
          this.meddleList.push({
            type: this.type,
            list: obj.meddleList,
            itemList: [{interventionName: '', materialId: '', number: '', materialMoney: '', totalMoney: ''}]
          });
        }
        this.meddleList = [...this.meddleList];
        this.dataForm.links = this.meddleList;
      },
      // 删除干预项
      deleteHandle(index) {
        this.meddleList.splice(index, 1);
        this.dataForm.links = [...this.meddleList]
      },
      // 计算总费用
      numberChangeHandle(val, index, itemIndex) {
        if (
          this.meddleList[index]["itemList"][itemIndex]["number"] &&
          this.meddleList[index]["itemList"][itemIndex]["materialMoney"]
        ) {
          let total =
            (this.meddleList[index]["itemList"][itemIndex]["number"] *
              10000 *
              (this.meddleList[index]["itemList"][itemIndex]["materialMoney"] *
                10000)) /
            100000000;
          this.meddleList[index]["itemList"][itemIndex]["totalMoney"] = total;
        }
      },

      // 添加干预项类型
      addNewTypeHandle(index) {
        let timestamp = new Date().valueOf();
        let obj = {
          timestamp: timestamp,
          interventionName: '',
          materialId: '',
          number: '',
          materialMoney: '',
          totalMoney: ''
        }
        this.meddleList[index]['itemList'].push(obj)
        this.dataForm.links = [...this.meddleList]
      },
      // 删除干预项类型
      delTypeHandle(index, itemIndex) {
        this.meddleList[index]['itemList'].splice(itemIndex, 1);
        this.dataForm.links = [...this.meddleList]
      },
      //  数组去重
      unique(arr) {
        for (var i = 0; i < arr.length; i++) {
          for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) { //第一个等同于第二个，splice方法删除第二个
              arr.splice(j, 1);
              j--;
            }
          }
        }
        return arr;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .bg-row {
    padding-left: 15px;
    padding-top: 5px;
  }

  .miui-table {
    width: 100%;
    margin: 10px 0;


    tr th,
    tr td {
      padding: 5px 8px;
      border: solid 1px #fff;
      text-align: center;
    }

    .miui-table-header td {
      text-align: center;
    }
  }
</style>
